<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue模板方法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
<div id="app">
    <h3 >{{msg}}</h3>
    <!-- 绑定一次好用-->
    <p v-once>{{msgChange}}</p>

    <!-- 双大括号会将数据解释为普通文本，而非 HTML 代码。
    为了输出真正的 HTML，需要使用 v-html-->

    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>

    <!-- 按钮-Boolean值-->
    <button v-bind:disabled="isButton">Button</button>

    <p v-once>{{ msg.split('').reverse().join('') }}</p>

    <a v-bind:href="url">百度...</a>

    <!-- 修饰符，该修饰符阻止表单提交之后刷新-->
    <form v-on:submit.prevent="onSubmit">...</form>

    <!--缩写 -->
    <a :href="url">百度...缩写</a>
    <br>
    <!--缩写 -->
    <button @click="myFun">myFun</button>
</div>



<script>

    var app = new Vue({
        el: '#app',
        data: {//data的数据从json中获取，解决跨域问题
            msg:"hello",
            msgChange:"alice is beautiful",
            rawHtml:"<span style='color: green;font-size: larger;font-weight: bold'>Green is Good Day</span>",
            isButton:true,
            url:"https://baidu.com"
        },
        methods:{
            myFun:function () {
                alert("hi!")
            }
        },

    });

</script>
</body>
</html>
